import React, { useState, useEffect, useRef } from 'react';
import { connect } from 'umi';
import styles from './index.less';
import { Avatar } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import { getPermisstion } from 'enoad-component-web/dist/src/core/util';

const GlobalHeader = (props: any) => {
  const { dispatch, loading } = props;
  let role = localStorage.getItem('user');
  const userData = role && JSON.parse(role || '');

  const LoginOut = () => {
    dispatch({ type: 'enoadLogin/logout' });
  };

  const SysConfig = () => {
    dispatch({ type: 'enoadLogin/sysConfig', payload: userData });
  };
  return (
    <div className={styles.headerWrap} style={{ background: '#fff' }}>
      <div className={styles.rightHeader}>
        {getPermisstion('system_config') && (
          <div className={styles.sytting} onClick={SysConfig}>
            {'系统配置'}
          </div>
        )}
        <div className={styles.userWrap} onClick={LoginOut}>
          {`所属公司：${
            userData && userData.company && userData.company.companyName
          }`}
          <Avatar icon={<UserOutlined />} />
          {userData && userData.name}
        </div>
      </div>
    </div>
  );
};

export default connect(({ enoadLogin, loading }) => ({
  ...enoadLogin,
  loading,
}))(GlobalHeader);
